<!--  -->
<template>
    <div>

<div class="m-container animated fadeIn">
    <div class="ui container m-pad-tb-big m-opacity">
        <!--头部-->
        <div class="ui segment ">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h4 class="ui teal header">归档</h4>
                </div>
                <div class="right aligned column">
                    共 <h3 class="ui orange header m-inline-block m-text-thin">{{countBlog}}</h3> 个
                </div>
            </div>
        </div>
        <!--归档信息-->
        <div class="m-margin-bottom-max" v-for="archive in archiveMap" :key="archive.year">
            <div class="ui top attached secondary segment">
                <h2 class="ui center aligned header" >{{archive.year}}</h2>
            </div>
            <div class="ui bottom attached  segment ">
                <div class="ui fluid vertical menu">
                    <router-link class="item" v-for="blog in archive.blogs" :key="blog.id" :to="'/blog/'+blog.id">
                        <span >
                            <i class="mini teal circle icon"></i><span class="m-pad-lr-min">{{blog.title}}</span>
                            <div class="ui teal basic left pointing label ">{{blog.updateTime | formatDate("MM月DD号")}}</div>
                        </span>
                        <div class="ui orange basic left pointing label m-margin-tb-tiny large">{{blog.flag}}</div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</div>

    </div>
</template>

<script>
export default {
    data () {
        return {
            countBlog:"",
            archiveMap:""
        };
    },
    created(){
        var _this =this
        _this.axios.get("/archives")
        .then(res=>{
           _this.archiveMap = res.data.archiveMap
           _this.countBlog = res.data.countBlog
        }).catch(e=>{
            console.log(e)
        })
    }
}

</script>
<style lang='scss' scoped>
</style>